<template>
  <div>
    <div>
      <div class="page" v-show="show">
        <div class="pagelist">
          <!-- 上一页 -->
          <span
            class="jump"
            :class="{ active: topp }"
            @click="
              {
                nowPage--;
              }
            "
            >上一页</span
          >
          <!-- 省略点 -->
          <span v-show="nowPage > 5" class="jump" @click="topPage(1)">1</span>
          <span class="ellipsis" v-show="ehead">...</span>
          <span
            class="jump"
            v-for="item in list"
            :class="{ bgprimary: nowPage == item }"
            @click="topPage(item)"
            >{{ item }}</span
          >
          <span class="ellipsis" v-show="ehind">...</span>
          <!-- 下一页 -->
          <span
            :class="{ active: end }"
            class="jump"
            @click="
              {
                nowPage++;
              }
            "
            >下一页</span
          >
          <span
            v-show="nowPage < pages - 4"
            class="jump"
            @click="topPage(pages)"
            >{{ pages }}</span
          >

          <span class="jumppoint">跳转到：</span>
          <span class="jumpinp"
            ><input type="text" v-model="changePage"
          /></span>
          <span class="jump gobtn" @click="topPage(changePage)">GO</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      nowPage: 1, //当前页
      pages: 20, //总页数
      changePage: "", //跳转页
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 高亮显示 tab切换
    topPage(id) {
      this.nowPage = id;
    },
  },
  computed: {
    show() {
      return this.pages && this.pages != 1;
    },
    topp() {
      return this.nowPage == 1;
    },
    end() {
      return this.nowPage == this.pages;
    },
    ehead() {
      if (this.pages <= 7) return false;
      return this.nowPage > 5;
    },
    ehind() {
      if (this.pages <= 7) return false;
      var arr = this.list;
      return arr[arr.length - 1] != this.pages;
    },
    list() {
      var left = 1,
        right = this.pages,
        add = [];
      if (this.pages >= 7) {
        if (this.nowPage > 5 && this.nowPage < this.pages - 4) {
          left = Number(this.nowPage) - 3;
          right = Number(this.nowPage) + 3;
        } else {
          if (this.nowPage <= 5) {
            left = 1;
            right = 7;
          } else {
            right = this.pages;
            left = this.pages - 6;
          }
        }
      }
      while (left <= right) {
        add.push(left);
        left++;
      }
      return add;
    },
  },
};
</script>
<style scoped lang='scss'>
.page {
  font-weight: 900;
  height: 40px;
  text-align: center;
  color: #888;
  margin: 20px auto 0;
  background: #f2f2f2;
}

.pagelist {
  font-size: 0;
  background: #fff;
  height: 50px;
  line-height: 50px;
}

.pagelist span {
  font-size: 14px;
}

.pagelist .jump {
  border: 1px solid #ccc;
  padding: 5px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
}

.pagelist .bgprimary {
  cursor: default;
  color: #fff;
  background: #337ab7;
  border-color: #337ab7;
}

.jumpinp input {
  width: 55px;
  height: 26px;
  font-size: 13px;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.ellipsis {
  padding: 0px 8px;
}

.jumppoint {
  margin-left: 30px;
}

.pagelist .gobtn {
  font-size: 12px;
}

.bgprimary {
  cursor: default;
  color: #fff;
  background: #337ab7;
  border-color: #337ab7;
}
.pagelist .jump.active {
  pointer-events: none;
  background: #ddd;
}
</style>
